<template>
  <view v-if="authriotyFlag" class="content" @touchmove="handleTouchMove">
    <!-- 头部搜索-->
    <view v-if="purchaserShow">
      <view class="btn">
        <button class="new fntw600" v-if="hasPermission" type="primary" @click="handleAdd">
          +创建采购计划
        </button>
      </view>
      <view class="search-box">
        <view @click="showPopClick">
          <text>更多查询</text>
          <image :src="filterIcon" style="width: 20px;height:20px" />
        </view>
      </view>
      <!-- <view class="weui-search-box" @click="showPopClick">更多查询</view> -->
      <!-- 排号信息列表 -->
      <view class="phxx-list">
        <view class="item" v-for="(item, index) in rowNumberData" :key="index" @click="handleDetail(item.id)">
          <row-number :itemList="item" :findCarBtnAuth="pFindCarBtnAuth" :goodsSourceBtnAuth="pGoodsSourceBtnAuth"
            @showCode="showCodeImg" @manualCalling="handleManualCalling"></row-number>
        </view>
        <uni-load-more :status="pageParams.isMore" />
      </view>
      <!-- 二维码弹窗 -->
      <uni-popup ref="codePopup" class="">
        <view id="qrCodeBox-content">
          <view class="code-mess-box">
            <view class="code-mess-item" v-if="!!phursName">
              <view class="code-mess-titl green">供</view>
              <view class="code-mess-val">{{ phursName }}</view>
            </view>
            <view class="code-mess-item" v-if="!!loadstationname">
              <view class="code-mess-titl blue">装</view>
              <view class="code-mess-val">{{ loadstationname }}</view>
            </view>
            <view class="code-mess-item" v-if="!!unloadstationname">
              <view class="code-mess-titl red">卸</view>
              <view class="code-mess-val">{{ unloadstationname }}</view>
            </view>
            <view class="code-mess-item" v-if="!!unloadpointname">
              <view class="code-mess-titl orange">卸</view>
              <view class="code-mess-val">{{ unloadpointname }}</view>
            </view>
          </view>
          <view class="code-mess-boxss" v-if="false">
            <view class="code-mess-item">
              <view class="code-mess-titl">收货人电话</view>
              <view class="code-mess-val">{{ deliverPhone }}</view>
            </view>
            <view class="code-mess-item">
              <view class="code-mess-titl">发货人电话</view>
              <view class="code-mess-val">{{ shippingPhone }}</view>
            </view>
            <view class="code-mess-item">
              <view class="code-mess-titl">运费平台</view>
              <view class="code-mess-val">{{ freightPlatform }}</view>
            </view>
            <view class="code-mess-item">
              <view class="code-mess-titl">承运单位</view>
              <view class="code-mess-val">{{ carrierName }}</view>
            </view>
          </view>

          <view class="code-mess-price-box">
            运价(元/吨)：<span class="price-num">{{ transprice }}</span><span class="line"></span> {{ coalsname }}
          </view>
          <canvas canvas-id="qrcode" id="qrCodeBox" style="width: 400rpx; height: 400rpx;"></canvas>
        </view>
      </uni-popup>
      <more-search :show="popShow" ref="moreSearchRef" :list="stateList" @filterChange="sureClick"
        @closePop="popShow=false"></more-search>
    </view>
    <view v-if="saleShow">
      <view class="top-search">
        <uni-easyinput prefixIcon="search" maxlength="50" v-model="search.name" placeholder="请选择客户"
          @click.native="openSelectSearch" disabled="true">
        </uni-easyinput>
        <button @click="resetSearch">重置</button>
      </view>
      <view class="phxx-list">
        <view class="item" v-for="(item, index) in salePlanList" :key="index">
          <sale-plan :itemList="item" :findCarBtnAuth="sFindCarBtnAuth" :goodsSourceBtnAuth="sGoodsSourceBtnAuth"
            :orgShow="orgShow" :statusList="statusList" @showCode="showSaleCodeImg"></sale-plan>
        </view>
        <uni-load-more :status="pageParams.isMore" />
      </view>
      <uni-popup ref="codeSalePopup">
        <view id="qrCodeBox-content">
          <view class="code-mess-box" style="border: none;">
            <view class="code-item" style="width:100%;padding-top: 12px;font-weight: 600;" v-if="orgShow">
              <view class="code-title" style="width:74px;">所属组织:</view>
              <view class="code-value" style="width:140px;">{{ saleCodeData.organizationName }}</view>
            </view>
            <view class="code-item" style="padding-top: 12px;font-weight: 600;">
              <view class="code-title">货主:</view>
              <view class="code-value">{{ saleCodeData.cusName }}</view>
            </view>
            <view class="code-item proName">
              <view class="code-value">{{ saleCodeData.clientName || '' }}</view>
            </view>
          </view>
          <canvas canvas-id="qrcode" id="qrCodeBox" style="width: 400rpx; height: 400rpx;"></canvas>
        </view>
      </uni-popup>
      <select-search ref="selectSearchRef" :show="isShowSearchPop" :type="'radio'" :name="'cusName'" :value="'cusId'"
        :dataLists="customerList" :param="search.id" @search="searchCustomerFn" @cancel="cancelSelectFn"
        @submit="submitCustomerFn"></select-search>
    </view>
  </view>
  <view v-else class="noauth-box">
    {{ messAuth }}
  </view>
</template>

<script>
  import {
    getRowList,
    getBlackInFor,
    addBlackList,
    lineupCall,
    addViolationList
  } from '@/api/paihao';
  import { toast } from '@/utils/common.js';
  import { getSendCarPage, getCoalCustomer } from '@/api/sale.js';
  import { getCodeList } from '@/api/tranplan.js';
  import { getPurIds } from '@/api/transport.js';
  import { getBasisDeploy } from "@/api/system/user.js"
  import { getCustList, getLineupStatus, getCoalLists, getDictDatas } from '@/api/me.js';
  import { getDictByString, dictTansParams, getButtonShow } from '@/utils/common';
  import { getAccessToken, getTenantId, getDriverId, getAccountIdentity } from '@/utils/auth';
  import UQrcode from '@/utils/uqrcode.js';
  import { getInfo, getDictList } from '@/api/login';
  import constant from '@/utils/constant';
  import storage from '@/utils/storage';
  import config from '@/config';
  export default {
    data() {
      return {
        hasPermission: false,
        pFindCarBtnAuth: false,
        pGoodsSourceBtnAuth: false,
        sFindCarBtnAuth: false,
        sGoodsSourceBtnAuth: false,
        messAuth: '',
        transprice: 0,
        coalsname: '',
        phursName: '',
        loadstationname: '',
        unloadstationname: '',
        unloadpointname: '',
        colors: '#409eff',
        popShow: false,
        loadingSiteName: '',
        qrCodeUrl: '',
        proId: undefined,
        hideFlag: false,
        authriotyFlag: false,
        menus: this.$store.state.menus,
        color: '#333',
        selectedColor: '#1aad19',
        backgroundColor: '#1aad19',
        position: 'bottom',
        borderStyle: '#ccc',
        fileLists: [],
        hasLoadPage: false,
        imagesLists: [],
        imageStyles: {
          width: 180,
          height: 110
        },
        rowKey: ['shortName', 'waybillStatusName'],
        rowNumberData: [],
        index: 0,
        itemList: {},
        //开关
        switchListText: [
          {
            title: '开',
            value: 0
          },
          {
            title: '关',
            value: 1
          }
        ],
        queryParam: {
          current: 1,
          pageSize: 3,
          enterId: undefined,
          userId: undefined,
          jyStatus: undefined,
          proName: undefined,
          loadingSiteName: undefined,
          landingPlace: undefined
        },
        coaltypeDatas: [],
        pageParams: {
          isMore: 'more'
        },
        saleParams: {
          cusId: undefined,
          pageNo: 1,
          pageSize: 10
        },
        custList: [],
        stateList: [],
        statusList: [],
        lineupStatusList: [],
        violationTypeList: [],
        salePlanList: [],
        saleCodeData: {
          cusName: undefined,
          proName: undefined,
          organizationName: undefined
        },
        cacheCustomerList: [],
        customerList: [],
        isShowSearchPop: false,
        search: {
          id: '',
          name: ''
        },
        orgShow: false
      };
    },
    computed: {
      filterIcon() {
        return config.baseImgUrl + '/more-fliter.png';
      },
      imagesPath() {
        if (this.$store.state.user.curTypeColor == '#D22C2C') {
          return config.baseImgUrl + '/code1.png';
        } else if (this.$store.state.user.curTypeColor == '#409EFE') {
          return config.baseImgUrl + '/code.png';
        } else {
          return config.baseImgUrl + '/code.png';
        }
      },
      imagesDefaultPath() {
        return config.baseImgUrl + '/img.png';
      },
      purchaserShow() {
        return !getAccountIdentity() || getAccountIdentity() === 0
      },
      saleShow() {
        return getAccountIdentity() === 1
      }
    },
    onPullDownRefresh() {
      if (!this.authriotyFlag) return;
      if (this.purchaserShow) {
        this.queryParam.current = 1;
        this.pageParams.isMore = 'more';
        this.rowNumberData = [];
        this.getRowList();
      }
      if (this.saleShow) {
        this.salePlanList = [];
        this.saleParams.pageNo = 1;
        this.pageParams.isMore = 'more';
        this.getSendCarPage()
      }
    },
    onReachBottom() {
      if (this.pageParams.isMore == 'more') {
        if (this.purchaserShow) {
          this.queryParam.current++;
          this.getRowList();
        }
        if (this.saleShow) {
          this.saleParams.pageNo++
          this.getSendCarPage()
        }
      }
    },
    onHide() { },
    onShow: async function () {
      let res = await getBasisDeploy(getTenantId())
      if (res.code == 200) {
        this.orgShow = res?.data?.isEnabledOrganization === 1 ? true : false
      }
      this.queryParam.current = 1;
      this.popShow = false;
      this.getDictLists()
      this.getMenuAuth();
      this.getbuttonAuth();
    },
    methods: {
      async getbuttonAuth() {
        //调用公共方法
        if (getTenantId() && getDriverId()) {
          this.hasPermission = await getButtonShow('transportPlanApp:add');
          this.pFindCarBtnAuth = await getButtonShow('purchase:findcar');
          this.pGoodsSourceBtnAuth = await getButtonShow('purchase:goodssource');
          this.sFindCarBtnAuth = await getButtonShow('sales:findcar');
          this.sGoodsSourceBtnAuth = await getButtonShow('sales:goodssource');
          console.log('this.pFindCarBtnAuth', await getButtonShow('purchase:findcar'))
        }
      },
      changeClick(arr) {
        // 适配小程序 样式需要在父级改变
        this.classList = arr;
      },
      showPopClick() {
        this.popShow = true;
      },

      hideright() {
        this.popShow = false;
      },

      sureClick(datas) {
        this.popShow = false;
        this.queryParam.current = 1;
        this.queryParam.jyStatus = datas.jyStatus;
        this.queryParam.proName = datas.proName;
        this.queryParam.loadingSiteName = datas.loadingSiteName;
        this.queryParam.loadingPoint = datas.loadingPoint;
        this.getRowList();
      },
      handleTouchMove(event) {
        // 获取触摸点信息
        this.hideFlag = false;
        this.$refs['codePopup']?.close();
        this.$refs['codeSalePopup']?.close();
      },
      changeCoaltype(e) {
        this.coaltypeDatas.forEach((item) => {
          if (item.value == e) this.queryParam.proName = item.text;
        });
      },
      resetFun() {
        this.queryParam.proName = undefined;
        this.queryParam.loadingSiteName = undefined;
        this.queryParam.loadingPoint = undefined;
      },
      async getCoalList() {
        let list = await getPurIds(getDriverId());
        let res = await getCoalLists(list.data);
        if (res.code == '200') {
          res.data.forEach((item) => {
            if (!!item) {
              this.coaltypeDatas.push({
                value: item.proId,
                text: item.proName
              });
            }
          });
        }
      },
      handleAdd() {
        uni.navigateTo({
          url: '/packageB/pages/common/transport-editing/index'
        });
      },
      handleDetail(id) {
        uni.navigateTo({
          url: `/packageB/pages/common/transport-editing/index?id=${id}`
        });
      },
      searchData() {
        this.queryParam.current = 1;
        this.getRowList();
        this.$refs['searchPopup'].close();
      },
      showCodeImg(item) {
        this.phursName = item.purchaser;
        this.loadstationname = item.loadingSiteName;
        this.unloadstationname = item.landingPlace;
        this.unloadpointname = item.landingPointName;
        this.transprice = item.freight || 0;
        this.coalsname = item.proName;
        let data = 1; //默认网货状态
        if (
          item.onlineGoodsConfiguration == 1 &&
          item.transportationConfiguration == 1
        )
          data = 1;
        else data = 0;
        this.loadingSiteName = item.loadingSiteName;
        UQrcode.make({
          canvasId: 'qrcode', // 对应上面的canvas-id
          componentInstance: this,
          text: `${config.scanCodeUrl
            }?path=/pages/order-receiving/order-receiving?p=${item.planNo
            }&t=${getTenantId()}&o=${data}#wechat-redirect`, // 需要转成二维码的内容
          size: uni.upx2px(400),
          backgroundColor: 'transparent',
          foregroundColor: '#000000',
          fileType: 'jpg',
          errorCorrectLevel: 1
        });
        setTimeout(() => {
          this.$refs['codePopup'].open();
        }, 500)
        this.hideFlag = true;
      },
      async showSaleCodeImg(item) {
        this.saleCodeData = {
          cusName: item.cusName,
          clientName: item.clientName,
          organizationName: item.organizationName
        }
        UQrcode.make({
          canvasId: 'qrcode', // 对应上面的canvas-id
          componentInstance: this,
          text: `${config.scanCodeUrl
            }?path=/pages/order-receiving/order-receiving?planId=${item.planNo
            }&tenantId=${getTenantId()}&saleSwitch=0#wechat-redirect`,
          size: uni.upx2px(400),
          backgroundColor: 'transparent',
          foregroundColor: '#000000',
          fileType: 'jpg',
          errorCorrectLevel: 1
        });
        setTimeout(() => {
          this.$refs['codeSalePopup'].open();
        }, 500)
        this.hideFlag = true;
      },
      searchMore() {
        // this.$refs['searchPopup'].open();
      },
      getMenuAuth() {
        if (this.purchaserShow) {
          this.getPurchaserAuth()
        }
        if (this.saleShow) {
          this.getSaleAuth()
        }
      },
      getPurchaserAuth() {
        let menusLists = [];
        this.$store.dispatch('GetUserAuthority').then(async (res) => {
          if (res.code == '200') {
            this.getCoalList();
            menusLists = res.data || [];
            let menuItem = [];
            if (menusLists.length > 0) {
              menuItem = menusLists.find((item) => item.id == 129); //采购商管理
              let menuItemCur = [];
              if (!!menuItem?.children)
                menuItemCur = menuItem.children.find((item) => item.id == 968); //运输计划
              if (!!menuItemCur) {
                this.authriotyFlag = true;
                this.resetChange()
              } else {
                this.messAuth = '您无权查看此页面！请联系管理员';
                this.authriotyFlag = false;
              }
            } else {
              this.messAuth = '您无权查看此页面！请联系管理员';
              this.authriotyFlag = false;
            }
          } else {
            if (!getAccessToken()) {
              uni.reLaunch({
                url: '/packageB/pages/login'
              });
            }
          }
        });
      },
      async getSaleAuth() {
        this.authriotyFlag = await getButtonShow('salePlan');
        if (this.authriotyFlag) {
          this.getCoalCustomer()
          this.resetSearch()
        } else {
          this.messAuth = '您无权查看此页面！请联系管理员';
        }
      },
      openSelectSearch() {
        this.customerList = JSON.parse(JSON.stringify(this.cacheCustomerList))
        this.isShowSearchPop = true
      },
      searchCustomerFn(keyword) {
        this.customerList = this.cacheCustomerList.filter(e => e.cusName.includes(keyword))
      },
      cancelSelectFn() {
        this.isShowSearchPop = false
      },
      submitCustomerFn(value) {
        this.search = {
          id: value.cusId,
          name: value.cusName
        }
        this.salePlanList = []
        this.saleParams.pageNo = 1
        this.pageParams.isMore = 'more'
        this.saleParams.cusId = this.search.id
        this.getSendCarPage()
        this.isShowSearchPop = false
      },
      resetSearch() {
        this.search = {
          id: undefined,
          name: undefined
        }
        this.salePlanList = []
        this.saleParams.pageNo = 1
        this.pageParams.isMore = 'more'
        this.saleParams.cusId = undefined
        this.$refs.selectSearchRef?.resetData()
        this.getSendCarPage()
      },
      async getCoalCustomer() {
        const res = await getCoalCustomer()
        if (res.code === 0) {
          this.cacheCustomerList = res.data || []
          this.customerList = JSON.parse(JSON.stringify(this.cacheCustomerList))
        }
      },
      async getSendCarPage() {
        try {
          const res = await getSendCarPage(this.saleParams)
          if (res.code === 0) {
            const result = this.handleResultList(res.data?.list || [])
            const total = res.data?.total || 0
            this.salePlanList = [...this.salePlanList, ...result]
            if (this.salePlanList.length === total) {
              this.pageParams.isMore = 'noMore'
            }
          } else {
            toast(res.msg)
          }
        } finally {
          wx.stopPullDownRefresh();
        }

      },
      handleResultList(list) {
        return list.map(e => {
          if (e.proNameList?.length) {
            e.joinName = e.proNameList.map(m => m.proName).join(',')
            e.clientName = e.proNameList.map(m => m.proName).join(' | ')
          }
          return e
        })
      },
      resetForm(res) {
        if (res == 2) {
          this.vialationFormData = {
            vehicleNo: '',
            driverName: '',
            driverMobile: '',
            waybillNo: '',
            violationType: '',
            violationTime: '',
            violationLocation: '',
            violationDescription: '',
            handleStatus: 1,
            handleResult: undefined,
            evidencePhoto: [],
            waybillNo: '',
            id: ''
          };
        }
        this.fileLists = [];
        this.vialationFormData.evidencePhoto = [];
      },
      goToDetail(item) {
        wx.navigateTo({ url: '/pages/lineup/index?id=' + item.id });
      },
      confirmChange(data) {
        this.rowNumberData = [];
        this.queryParam.vehicleNo = data.vehicleNo;
        // this.queryParam.customerId = data.customerId
        this.queryParam.queueStatus = data.waybillStatus;
        this.queryParam.startTime = data.startTime;
        this.queryParam.endTime = data.endTime;
        this.getRowList();
      },
      photoSuccess(e) {
        console.log('触发了上传select123', e);
      },
      progress(e) {
        console.log('上传进度：', e);
      },
      // 上传成功
      success(e) {
        console.log('上传成功', e);
      },
      // 上传失败
      fail(e) {
        console.log('上传失败：', e);
      },
      deleteF(e) {
        this.fileLists.splice(this.fileLists.indexOf(e.tempFile.url), 1);
        this.vialationFormData.evidencePhoto.splice(
          this.fileLists.indexOf(e.tempFile.url),
          1
        );
      },
      select(e) {
        let that = this;
        let imgLists = e.tempFilePaths;
        imgLists.forEach((item) => {
          that.uploadFiles(item);
          that.fileLists.push({
            url: item,
            extname: item.split('/')[item.split('/').length - 1].split('.')[1],
            name: item.split('/')[item.split('/').length - 1]
          });
        });
      },
      // 上传函数
      async uploadFiles(tempFilePaths) {
        let that = this;
        return new Promise(async (resolve, reject) => {
          await uni.uploadFile({
            url: config.baseUrl + config.baseApi + '/infra/file/upload',
            filePath: tempFilePaths,
            name: 'file',
            header: {
              Authorization: 'Bearer ' + getAccessToken(),
              'Content-Type': 'multipart/form-data'
            },
            success: (res) => {
              let data = JSON.parse(res.data); //返回的是字符串，需要转成对象格式
              if (data.code == 0) {
                that.vialationFormData.evidencePhoto =
                  that.vialationFormData.evidencePhoto.concat(data.data);
                resolve(data.data);
              }
            },
            fail: (err) => {
              console.log('err', err);
            }
          });
        });
      },
      // 移出图片函数
      async deletephoto() {
        console.log('shanchu');
      },
      // 获取违规列表
      async getVioTypeList() {
        const type = 'violation_type';
        this.violationTypeList = getDictByString(type);
      },
      // 输入框输入时清除选中
      handleInput(item) {
        console.log('handleInput~', item);
        // this.vialationFormData.violationType = '';
      },
      updateViolationType(item) {
        this.vialationFormData.violationType = item;
      },

      //客户选择处理
      bindPicker1Change(item) {
        this.queryParam.current = 1;
        this.queryParam.customerId = item.id;
        this.rowNumberData = [];
        this.getRowList();
      },
      bindPicker2Change(item) {
        this.queryParam.current = 1;
        this.queryParam.queueStatus = item.waybillStatus;
        this.rowNumberData = [];
        this.getRowList();
      },
      bindPicker3Change(item) {
        this.queryParam.current = 1;
        this.queryParam.startTime = item[0];
        this.queryParam.endTime = item[1];
        this.rowNumberData = [];
        this.getRowList();
      },
      bindChange(item) {
        this.queryParam.current = 1;
        this.queryParam.vehicleNo = item.vehicleNo;
        this.rowNumberData = [];
        this.getRowList();
      },
      resetChange() {
        this.queryParam = {
          current: 1,
          pageSize: 3,
          enterId: undefined,
          userId: undefined,
          loadingSiteName: undefined,
          landingPlace: undefined,
          proName: undefined
        };
        this.rowNumberData = [];
        this.pageParams.isMore = 'more'
        this.$refs.moreSearchRef?.resetFilter()
        this.getRowList();
      },
      //获取精简客户列表
      async getCustList() {
        try {
          let res = await getCustList();
          if (res.code == 0) {
            this.custList = res.data;
          }
        } catch (e) {
          return false;
        }
      },
      //获取排号状态
      async getLineupState() {
        try {
          let res = await getLineupStatus({ businessType: 1 });
          if (res.code == 0) {
            this.lineupStatusList = res.data;
          }
        } catch (e) {
          return false;
        }
      },
      //获取排号信息列表
      async getRowList() {
        try {
          //遍历对象过滤空值
          // this.queryParam.tenantId = getTenantId()
          this.queryParam.enterId = getTenantId();
          this.queryParam.userId = getDriverId();
          //TODO
          let data = {};
          Object.keys(this.queryParam).forEach((item) => {
            if (this.queryParam[item]) {
              data[item] = this.queryParam[item];
            }
          });
          this.pageParams.isMore = 'loading';
          let dicts = await getDictList();
          let transStatusLists = await dictTansParams(
            dicts.data,
            'transport_plan_status'
          );
          let res = await getRowList(data);
          if (res.code == 200) {
            if (this.queryParam.current == 1) {
              this.rowNumberData = res.data.rows;
            } else {
              this.rowNumberData = [...this.rowNumberData, ...res.data.rows];
            }
            let transStatusObj = {};
            transStatusLists.forEach((item) => {
              transStatusObj[item.value] = item.text;
            });
            this.rowNumberData.forEach((item, index) => {
              item['jyStatusName'] = transStatusObj[Number(item.jyStatus)];
            });
            if (res.data.total == this.rowNumberData.length) {
              this.pageParams.isMore = 'noMore';
            } else {
              this.pageParams.isMore = 'more';
            }
          }
          wx.stopPullDownRefresh();
        } catch (e) {
          return false;
        }
      },
      //拉黑弹窗
      dialogConfirm() {
        uni.navigateTo({
          url: '/pages/mine/black-list/black-list'
        });
      },
      dialoghmdConfirm() {
        uni.navigateTo({
          url: '/pages/mine/black-list/black-list'
        });
      },
      dialogwgConfirm() {
        uni.navigateTo({
          url: '/pages/mine/violation-infor/violation-infor'
        });
      },

      switchChangeFun(e) {
        //重新赋值，改变该值用于设置switch默认值
        this.blackFormData.enableStatus = e.swithcSelectItem.value;
      },

      //违规记录提交
      submitViolation(ref) {
        let _this = this;
        this.vialationFormData.driverName = this.itemList.driverName;
        this.vialationFormData.driverMobile = this.itemList.driverMobile;
        this.vialationFormData.vehicleNo = this.itemList.vehicleNo;
        this.vialationFormData.waybillNo = this.itemList.waybillNo;

        _this.$refs[ref]
          .validate()
          .then(async (res) => {
            //提交后台违规
            try {
              let data = _this.vialationFormData;
              // data.handleStatus = 1
              let res = await addViolationList(data);
              if (res.code == 0) {
                uni.showToast({
                  title: `添加通过`
                });
                _this.$refs['weiguiDialog'].open();
                _this.close('ViolationPopup');
              }
            } catch (e) {
              return false;
            }
          })
          .catch((err) => {
            console.log('err', err);
          });
      },
      submitBlack(ref) {
        let _this = this;
        _this.$refs[ref]
          .validate()
          .then(async (res) => {
            _this.blackFormData.vehicleNo = _this.itemList.vehicleNo;
            //拉黑操作
            try {
              let data = _this.blackFormData;
              let res = await addBlackList(data);
              if (res.code == 0) {
                uni.showToast({
                  title: `拉黑通过`
                });
                _this.$refs['hmdiDialog'].open();
              }
            } catch (e) {
              return false;
            }
          })
          .catch((err) => {
            console.log('err', err);
          });
      },
      // 弹框逻辑
      async handleManualCalling(item, type) {
        this.resetForm(type);
        this.itemList = item;

        if (type == 3) {
          //手动叫号
          this.$refs['jhPopup'].open();
        } else if (type == 2) {
          //违规记录，输入框应该清除
          this.violationTypeList = [];
          // await this.getVioTypeList()
          // this.$refs['comboxRefs'].clear()
          this.$refs['ViolationPopup'].open('center');
        } else if (type == 1) {
          //直接拉黑 先查询黑名单状态
          try {
            let data = { vehicleNo: this.itemList.vehicleNo };
            let res = await getBlackInFor(data);
            if (res.code == 0) {
              // 判断是否在黑名单
              if (res.data.length > 0) {
                //存在
                this.$refs['laheiDialog'].open();
              } else {
                //不存在
                this.$refs['shieldingPopup'].open();
              }
            }
          } catch (e) {
            return false;
          }
        }
      },
      close(ref) {
        this.$refs[ref].close();
      },
      async confirmJiao(item) {
        try {
          let data = { id: this.itemList.id };
          let res = await lineupCall(data);
          if (res.code == 0) {
            // 叫号成功
            uni.showToast({
              title: `叫号成功`
            });
            this.close('jhPopup');
            // 刷新页面
            this.queryParam.current = 1;
            this.pageParams.isMore = 'more';
            this.rowNumberData = [];
            this.getRowList();
          }
        } catch (e) {
          this.close('jhPopup');
          return false;
        }
      },
      async getDictLists() {
        let datas = await getDictDatas();
        let res = await dictTansParams(datas.data, 'transport_plan_status');
        this.stateList = res.map((item) => {
          return {
            value: item.value,
            text: item.text
          };
        });

        let data = await dictTansParams(datas.data, 'sale_transplan_status');
        this.statusList = data.map((item) => {
          return {
            value: item.value,
            text: item.text
          };
        });
      }
    }
  };
</script>

<style lang="scss" scoped>
  /* 全局样式 */
  body {
    overflow-x: hidden;
    /* 避免内容溢出水平滚动条 */
  }

  .overflowword {
    display: block !important;
  }

  /* 主内容区 */
  .content {
    position: relative;
    width: 100%;
    transition: transform 0.3s ease-out;
    /* 添加平滑过渡效果 */
  }

  /* 抽屉容器 */
  #drawer {
    // position: fixed;
    top: 0;
    right: 0;
    width: 410px;
    /* 抽屉宽度 */
    height: 100vh;
    /* 与视口高度相同 */
    background-color: #f8f8f8;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    /* 添加阴影效果 */
    transform: translateX(100%);
    /* 初始位置隐藏在右侧 */
    transition: transform 0.3s ease-out;
    /* 添加平滑过渡效果 */
  }

  /* 抽屉打开状态 */
  #drawer.open {
    transform: translateX(0);
    /* 抽屉滑入视口 */
  }

  /* 抽屉关闭状态 */
  #drawer.closed {
    transform: translateX(100%);
    /* 抽屉滑出视口 */
  }

  #qrcode {
    width: 200px;
    height: 200px;
  }

  .content {
    position: relative;

    .up-box {
      background: #fff;
      padding: 10px;
      border-radius: 2px;
    }

    .modal-header {
      .h2 {
        font-weight: 700;
        margin-bottom: 20px;
      }
    }

    .phxx-list {
      padding: 20rpx;
    }

    .pop {
      width: 100%;
      background-color: #ffffff;
      display: flex;
      flex-direction: column;
      align-items: center;
      border: 1px solid #ccc;
      border-radius: 20rpx;

      .phxx-item {
        width: 700rpx;
        padding: 0 20rpx;
        box-sizing: border-box;

        .phxx-item-content {
          width: 700rpx;
          height: 260rpx;
          display: flex;
          justify-content: space-around;
        }
      }

      .btn {
        margin-top: 5rpx;
        display: flex;
        justify-content: space-between;

        .mini-btn {}
      }
    }

    ::v-deep.violation-pop .example .uni-forms-item__label {
      width: 77px !important;
    }

    ::v-deep.shielding-pop .example .uni-forms-item__label {
      width: 120px !important;
    }

    .violation-pop,
    .shielding-pop {
      width: 700rpx;
      margin-bottom: 40rpx;
      font-size: 26.66rpx;
      color: #000;
      padding: 30rpx 20rpx;

      .top {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        margin-bottom: 30rpx;

        .ydbh {
          margin-bottom: 30rpx;
        }

        .cph {
          font-weight: 700;
        }

        .name {
          margin-left: 60rpx;
        }

        .infor-box {
          margin-top: 10px;

          .items {
            padding: 10rpx 0;

            .til {
              width: 160rpx;
              display: inline-block;
            }
          }
        }
      }

      ::v-deep.example .uni-forms-item__content .img-box {
        width: 500rpx;
      }

      ::v-deep.example .uni-forms-item__content .img-box image {
        width: 50px;
        height: 50px;
      }

      .example {
        width: 100%;
        background-color: #fff;

        .btn {
          margin-top: 20rpx;
          display: flex;
          justify-content: flex-end;
          align-items: flex-end;

          .mini-btn {
            height: 30px !important;
            line-height: 30px !important;
            padding: 0 20rpx;
            margin: 0 5rpx 0 5rpx;
            border: none !important;
          }
        }
      }

      .segmented-control {
        margin-bottom: 15px;
      }

      .form-item {
        display: flex;
        align-items: center;
      }
    }

    .popup-use {
      padding: 24px 30px;
      width: 290px;
      display: flex;
      justify-content: center;
      letter-spacing: 2px;
      color: #000000;
    }
  }

  .code-item {
    display: flex;
    justify-content: center;
    font-size: 15px;

    view {
      display: inline-block;
    }
  }

  .proName {
    margin-top: 6px;
    color: #333333;
  }

  .top-search {
    padding: 10px;
    display: flex;
    align-items: center;
    background-color: #ffffff;
    border-bottom: 1px solid #F1F2F5;

    input {
      flex: 1;
      height: 30px;
      line-height: 30px;
      padding: 0 10px;
      border-radius: 4px;
      margin-right: 20rpx;
      background-color: #F1F2F5;
    }

    button {
      margin-left: 10rpx;
    }
  }

  .search-box {
    display: flex;
    justify-content: flex-end;
    color: #333333;
    margin: 10px 10px 0 0;

    >view {
      display: flex;
      align-items: center;
    }

    text {
      position: relative;
      font-size: 15px;
      top: -1px;
    }

    image {
      width: 20px;
      height: 20px;
    }
  }
</style>